<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <link th:href="@{/static/backstage/css/layui.css}" rel="stylesheet"/>
    <style>
        table {
            border-collapse: collapse;
        }

        table th, td {
            padding: 9px 15px;
            font-size: 14px;
            border-width: 1px;
            border-style: solid;
            border-color: #e6e6e6;
            min-height: 20px;
            text-align: center;
        }

        table td {
            width: 200px;
        }
    </style>
</head>
<body>
<!--设置滚动条-->
<style>
    body::-webkit-scrollbar {
        width: 10px;
    }

    body::-webkit-scrollbar-track {
        /*background: #999;*/
        background: #fff;
        border-radius: 2px;
    }

    body::-webkit-scrollbar-thumb {
        /*background: red;*/
        background: #fff;
        border-radius: 10px;
    }

    body::-webkit-scrollbar-thumb:hover {
        /*background: #333;*/
        background: #fff;
    }

    body::-webkit-scrollbar-corner {
        /*background: #179a16;*/
        background: #fff;
    }
</style>
<div class="table_content" id="table_content"
     style="display: block; width: 100%;background-color: #fff;margin: 0 auto;">
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
        <legend>分类列表</legend>
    </fieldset>
    <div style="height: 50px;">
        <a href="javascript:void(0);" id="addCategory"
           style="color: #fff;background-color: #009688;text-decoration: none;padding: 5px 10px 5px 10px;border-radius: 2px;font-size: 16px;">新增</a>
        <a href="javascript:void(0);" id="refreshBtn"
           style="color: #fff;background-color: #009688;text-decoration: none;padding: 5px 10px 5px 10px;border-radius: 2px;font-size: 16px;">刷新</a>
    </div>
    <table>
        <tr style="background-color: #f2f2f2;font-weight: bold;">
            <td>ID</td>
            <td>分类名</td>
            <td style="width: 300px;">背景图片</td>
            <td>操作</td>
        </tr>
        <!--表格-->
        <tr th:each="categoryDtos:${categoryVO.pageList}">
            <td style="width:250px;overflow: hidden" th:text="${categoryDtos.categoryId}"></td>
            <td>
                <div style="overflow: hidden;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 5;"
                     th:text="${categoryDtos.categoryName}"></div>
            </td>
            <td style="height: 100px;max-width: 150px;">
                <img style="max-width: 100%;height: 100%;" th:src="${categoryDtos.backgroundImage}">
            </td>
            <td>
                <div style="float: left;margin-right: 15px;margin-left: 10px;">
                    <a href="javascript:void(0);" id="showCategory" onclick="showCategory(this);"
                       style="color: #fff;background-color: #009688;font-size: 14px;padding: 5px 10px 5px 10px;text-decoration: none;border-radius: 2px;"
                       th:type="${categoryDtos.categoryId}">查看</a>
                </div>
                <div style="float: left;margin-right: 15px;">
                    <a href="javascript:void(0);" id="editCategory"
                       onclick="editById(this)"
                       style="color: #fff;background-color: #009688;font-size: 14px;padding: 5px 10px 5px 10px;text-decoration: none;border-radius: 2px;" th:type="${categoryDtos.categoryId}">编辑</a>
                </div>
                <div style="float: left;margin-right: 15px;">
                    <a href="javascript:void(0);" id="deleteCategory"
                       onclick="deleteById(this)"
                       style="color: #fff;background-color: #009688;font-size: 14px;padding: 5px 10px 5px 10px;text-decoration: none;border-radius: 2px;" th:type="${categoryDtos.categoryId}">删除</a>
                </div>
            </td>
        </tr><!--END-->
    </table>
    <!--分页导航-->
    <div style="width: 44%;height: 60px;margin: auto;font-size: 15px">
        <a href="javascript:void(0);" id="preBtn" name="pre"
           style="background-color: #009688;padding: 5px 5px 5px 6px;color: #fff;border-radius: 2px;margin: 0px 10px 0px 10px;line-height: 60px;font-size: 14px;"
           title="上一页" type=""> 上一页 </a>
        <a href="javascript:void(0);" id="nextBtn" name="next"
           style="background-color: #009688;padding: 5px 5px 5px 6px;color: #fff;border-radius: 2px;margin: 0px 10px 0px 10px;line-height: 60px;font-size: 14px;"
           title="下一页"> 下一页 </a>
        &nbsp;跳转至 &nbsp;<input autocomplete="off" id="pageJumpInput" maxlength="3"
                               oninput="value=value.replace(/[^\d]/g,'')"
                               style="width: 25px;border: 1px solid #e6e6e6;border-radius: 2px;padding: 5px 5px;"
                               type="text">&nbsp; 页 &nbsp;<input id="pageJumpBtn" style="font-size: 14px;padding: 4px 5px 4px 6px;border-radius: 2px;background-color: #009688;color: #fff;border: none;" type="button"
                                                                   value="确 认">
        &emsp;当前第 [[${categoryVO.current}]] 页，共 [[${categoryVO.total}]] 页
    </div>
</div>
<!--新增页面-->
<div class="table_add" id="table_add"
     style="z-index: 999;border: 1px solid #e6e6e6; display: none;background-color: #fff;width: 73%;height: 500px;inset: 15% 12%;position: absolute;">
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
        <legend>新增分类</legend>
    </fieldset>
    <!-- 添加分类页面 -->
    <form action="" class="layui-form" id="addCategory_form" method="">
        <input name="categoryId" type="hidden">
        <div class="layui-form-item">
            <label class="layui-form-label">分类名称</label>
            <div class="layui-input-block" style="width: 250px;">
                <input autocomplete="off" class="layui-input" id="add_categoryName" maxlength="15" name="categoryName"
                       title="最大不能超过15个字符" type="text">
            </div>
            <div id="verCategoryNameDiv"
                 style="display: none;position: absolute;left: 48%;top: 15%;font-weight: 600;letter-spacing: 1px;"></div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">背景图片</label>
            <div style="width: 250px;height: 250px;border: 1px solid #e6e6e6;margin-left: 110px;">
                <img id="categoryImg" src="" style=" width: auto;height: 250px;"><br>
                <div id="verCategoryImgDiv"
                     style="display: none;position: absolute;left: 48%;top: 70%;font-weight: 600;letter-spacing: 1px;"></div>
            </div>
        </div>
        <div class="layui-form-item">
            <input lay-verify="required" id="backgroundImage" name="backgroundImage" type="hidden" value="">
            <div style="width: 80px;text-align: center;color: #fff;height: 30px;background-color: #009688;font-size: 14px;border-radius: 2px;line-height: 30px;margin-left: 110px;margin-top: 1%;padding: 3px;">
                <input accept="image/gif,image/jpeg,image/jpg,image/png,image/svg" id="chooseImg" onchange="showImg()"
                       style="opacity: 0;position: absolute;"
                       type="file">
                选择图片
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" id="addSureBtn" lay-filter="addForm" lay-submit>立即提交</button>
                <input class="layui-btn layui-btn-primary" id="addCancelBtn" type="button" value="取消">
            </div>
        </div>
    </form>
</div>
<!--编辑页面-->
<div class="table_update" id="table_update"
     style="z-index: 999;;border: 1px solid #e6e6e6; display: none;background-color: #fff;width: 73%;height: 500px;inset: 15% 12%;position: absolute;">
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
        <legend>编辑分类</legend>
    </fieldset>
    <!-- 修改分类页面 -->
    <form class="layui-form" id="editCategory_form">
        <input id="editCategoryId" name="categoryId" type="hidden" value="">
        <div class="layui-form-item">
            <label class="layui-form-label">分类名称</label>
            <div class="layui-input-block" style="width: 250px;">
                <input autocomplete="off" class="layui-input" id="editCategoryName" name="categoryName" type="text"
                       value="">
                <input id="monitorName" type="hidden" value="">
            </div>
            <div id="verEditCategoryNameDiv"
                 style="display: none;position: absolute;left: 48%;top: 15%;font-weight: 600;letter-spacing: 1px;"></div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">背景图片</label>
            <div style="width: 250px;height: 250px;border: 1px solid #e6e6e6;margin-left: 110px;">
                <img id="bgImg" src="" style=" width: auto;height: 250px;"><br>
                <div id="verEditCategoryImgDiv"
                     style="display: none;position: absolute;left: 48%;top: 70%;font-weight: 600;letter-spacing: 1px;"></div>
                <input type="hidden" id="monitorbgImg">
            </div>
        </div>
        <div class="layui-form-item">
            <input id="editBackgroundImage" name="backgroundImage" type="hidden" value="">
            <div style="width: 80px;text-align: center;color: #fff;height: 30px;background-color: #009688;font-size: 14px;border-radius: 2px;line-height: 30px;margin-left: 110px;margin-top: 1%;padding: 3px;">
                <input accept="image/gif,image/jpeg,image/jpg,image/png,image/svg" id="updateImg"
                       onchange="updateImage()"
                       style="opacity: 0;position: absolute;"
                       type="file">
                选择图片
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" id="editSureBtn" lay-filter="editForm" lay-submit>立即提交</button>
                <input class="layui-btn layui-btn-primary" id="updateCancelBtn" type="button" value="取消">
            </div>
        </div>
    </form>
</div>
<!--查看页面-->
<div class="table_show" id="table_show"
     style="z-index: 999;;border: 1px solid #e6e6e6; display: none;background-color: #fff;width: 73%;height: 500px;inset: 15% 12%;position: absolute;">
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
        <legend>查看分类</legend>
    </fieldset>
    <!-- 查看分类页面 -->
    <div class="layui-form-item">
        <label class="layui-form-label">分类名称</label>
        <div id="showCateName" class="layui-input-block" style="width: 250px;line-height: 38px">

        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">背景图片</label>
        <div style="height: 300px;margin-left: 110px;min-height: 100px;max-width: 80%">
            <img id="showbgImg" src="" style=" width: auto;height: 100%;"><br>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <input class="layui-btn layui-btn-primary" id="showCancelBtn" type="button" value="取消">
        </div>
    </div>

</div>
<!--遮罩-->
<div id="zhezhao"
     style="width: 100%;height: 100%;background-color:#000;opacity:0.3;display:none;z-index:500;position: absolute;left: 0;top: 0;"></div>
<script th:src="@{/static/backstage/js/jquery-2.1.1.js}"></script>
<script th:src="@{/static/backstage/js/layui.js}"></script>
<script th:inline="javascript">
    //点击显示查看页面
    function showCategory(data){
        var categoryId = data.type;
        $.get(
            "/backstage/updateCategoryById/"+categoryId,
            function (data) {
                $('#showCateName').text(data.categoryName);
                $('#showbgImg').attr('src',data.backgroundImage);
                $('#table_show').css('display','block');
                $('#zhezhao').css('display','block');
            }
        )

    }
    //show的取消按钮
    $('#showCancelBtn').click(function () {
        $('#table_show').css('display','none');
        $('#zhezhao').css('display','none');
    })
    // 点击显示新增页面
    $("#addCategory").click(function () {
        $("#table_add").css("display", "block");
        $("#zhezhao").css("display", "block");
    });
    //取消新增页面
    $("#addCancelBtn").click(function () {
        $("#table_add").css("display", "none");
        $("#zhezhao").css("display", "none");
        refresh();
    });
    //点击上传图片
    function showImg() {
        var file = document.getElementById('chooseImg').files[0];
        //单位为KB
        var imgSize = file.size / 1024;
        if (imgSize > 1024) {
            layer.msg('图片只能小于1M，请重新选择！', {icon: 5});
        } else {
            var re = new FileReader();
            re.readAsDataURL(file);
            re.onload = function (re) {
                $("#categoryImg").attr("src", re.target.result);
                $("#backgroundImage").attr("value", re.target.result)
            }
        }
    }
    //新增分类
    layui.use('form', function () {
        var form = layui.form,
            $ = layui.$;
        form.on('submit(addForm)', function (data) {
            //提交按钮失效
            $("#addSureBtn").attr("disabled", true);
            var categoryName = $("#add_categoryName").val();
            if (categoryName == "") {
                layer.msg('请输入分类名称！', {icon: 5});
                return false;
            }
            var categoryImg = $("#backgroundImage").val();
            if (categoryImg == "") {
                layer.msg('请上传分类背景！', {icon: 5});
                return false;
            }
            //执行到这一步，说明上面非空
            //提交表单3
            var formDate = $("#addCategory_form").serialize();
            $.post(
                "http://localhost:8081/backstage/addCategory",
                "action=addCategory&" + formDate,
                function (re) {
                    if (re == true) {
                        //添加成功
                        layer.msg('提交成功！', {icon: 6});
                        //刷新当前页面
                        refresh();
                    } else {
                        //添加失败
                        layer.msg('提交失败！', {icon: 5});
                    }
                    $("#table_add").css("display", "none");
                    $("#zhezhao").css("display", "none");
                });
        })
    });
    //监听新增分类的name
    $("#add_categoryName").blur(function () {
        var categoryName = $("#add_categoryName").val();
        if (categoryName == "" || $.trim(categoryName).length == 0) {
        } else {
            $.get(
                "http://localhost:8081/backstage/selectCategoryByName/" + categoryName,
                "action=selectCategoryByName",
                function (re) {
                    //没有查到
                    if (re == false) {
                        $("#verCategoryNameDiv").html("该分类名可用");
                        $("#verCategoryNameDiv").css("display", "block");
                        $("#verCategoryNameDiv").css("color", "#008B45");
                        $("#addSureBtn").attr("disabled", false);
                    } else {
                        //查到已存在的数据
                        $("#verCategoryNameDiv").html("该分类名已存在");
                        $("#verCategoryNameDiv").css("display", "block");
                        $("#verCategoryNameDiv").css("color", "red");
                        $("#addSureBtn").attr("disabled", true);
                    }
                }
            )
        }
    });
    //监测图片是否为空
    $("#chooseImg").blur(function () {
        var backImage = $("#backgroundImage").val();
        if (backImage != "") {
            $("#verCategoryImgDiv").html("");
        }
    });
    //伪刷新(视觉欺骗)
    function refresh() {
        var current = [[${categoryVO.current}]]
        $.ajax({
            url: "/backstage/queryCategoryList/" + current,
            success: function (html) {
                $("#table_content").html(html);
            }
        });
    }
    //刷新按钮
    $("#refreshBtn").click(function () {
        layer.load(1, {time: 0.2 * 1000});
        $.ajax({
            url: "/backstage/queryCategoryList/1",
            success: function (html) {
                $("#table_content").html(html);
                setTimeout(function () {
                    layer.msg('已为您刷新');
                }, 300)
            }
        });
    });
    //点击获取当前分类信息
    function editById(data) {
        $.get(
            "http://localhost:8081/backstage/updateCategoryById/" + data.type,
            function (data) {
                $("#editCategoryId").attr("value", data.categoryId);
                $("#editCategoryName").attr("value", data.categoryName);
                $("#monitorName").val(data.categoryName);
                $("#bgImg").attr("src", data.backgroundImage);
                $("#editBackgroundImage").attr("value", data.backgroundImage);
                $('#monitorbgImg').attr('value',data.backgroundImage);
            });
        setTimeout(function () {
            // 点击显示更新页面
            $("#table_update").css("display", "block");
            $("#zhezhao").css("display", "block");
        }, 200)
    }
    //点击更新上传图片
    function updateImage() {
        var file = document.getElementById('updateImg').files[0];
        //单位为KB
        var imgSize = file.size / 1024;
        if (imgSize > 1024) {
            layer.msg('图片只能小于1M，请重新选择！', {icon: 5});
        } else {
            var re = new FileReader();
            re.readAsDataURL(file);
            re.onload = function (re) {
                $("#bgImg").attr("src", re.target.result);
                $("#editBackgroundImage").attr("value", re.target.result);
            }
        }
    }
    //监听更新分类名是否可用
    $("#editCategoryName").blur(function () {
        var currentName = $("#monitor").val();
        var editName = $("#editCategoryName").val();
        if (editName != currentName) {
            if (editName != "" || $.trim(editName).length != 0) {
                $.get(
                    "http://localhost:8081/backstage/selectCategoryByName/" + editName,
                    "action=selectCategoryByName",
                    function (re) {
                        //没有查到
                        if (re == false) {
                            $("#verEditCategoryNameDiv").html("该分类名可用");
                            $("#verEditCategoryNameDiv").css("display", "block");
                            $("#verEditCategoryNameDiv").css("color", "#008B45");
                            $("#editSureBtn").attr("disabled", false);
                        } else {
                            //查到已存在的数据
                            $("#verEditCategoryNameDiv").html("该分类名已存在");
                            $("#verEditCategoryNameDiv").css("display", "block");
                            $("#verEditCategoryNameDiv").css("color", "red");
                            $("#editSureBtn").attr("disabled", true);
                        }
                    }
                );
            } else {
                $("#verEditCategoryNameDiv").html("");
                $("#verEditCategoryNameDiv").css("display", "none");
                //为空情况
                layer.msg('分类名称不能为空！', {icon: 5});
            }
        } else {
            $("#verEditCategoryNameDiv").html("");
        }
    });
    //更新信息
    layui.use('form', function () {
        var form = layui.form,
            $ = layui.$;
        form.on('submit(editForm)', function (data) {
            var editName = $("#editCategoryName").val();
            var currentName = $("#monitorName").val();
            var editImg = $('#editBackgroundImage').val();
            var currentImg = $('#monitorbgImg').val();
            if (editName == "") {
                layer.msg('分类名称不能为空！', {icon: 5});
                return false;
            }
            if (editName == currentName && editImg == currentImg) {
                layer.msg('分类未发生改变，不可提交！', {icon: 5});
                return false;
            }else {
                //按钮失效
                $("#editSureBtn").attr("disabled", true);
                var serData = $("#editCategory_form").serialize();
                $.post(
                    "http://localhost:8081/backstage/updateCategory",
                    "action=updateCategory&" + serData,
                    function (data) {
                        if (data == true) {
                            layer.msg('提交成功！', {icon: 6});
                        } else {
                            layer.msg('提交失败！', {icon: 5});
                        }
                    });
                //刷新当前页面
                setTimeout(function () {
                    $("#table_update").css("display", "none");
                    $("#zhezhao").css("display", "none");
                    refresh();
                }, 500);
            }
        })
    })
    //取消编辑页面
    $("#updateCancelBtn").click(function () {
        $("#table_update").css("display", "none");
        $("#zhezhao").css("display", "none");
        refresh();
    });
    // 删除分类
    function deleteById(data) {
        var deleteId = data.type;
        layer.confirm('确认删除这条分类？', {
            btn: ['确认', '取消'] //按钮
        }, function () {
            $.get(
                "/backstage/queryArticleIdByCategoryId/" + deleteId,
                "action=queryArticleIdByCategoryId",
                function (re) {
                    console.log("返回的标志====" + re);
                    if (re == true) {
                        //该分类下有博文，提示先删除博文
                        layer.msg('请先删除使用该分类的博文！', {icon: 2});
                        return false;
                    } else {
                        // layer.msg("删除成功！")
                        // 该分类下没有博文，可以删除博文
                        $.get(
                            "/backstage/deleteCategoryById/" + deleteId,
                            "action=deleteCategoryById",
                            function (re) {
                                if (re == true) {
                                    layer.msg('删除成功！', {icon: 1});
                                } else {
                                    layer.msg('删除失败！', {icon: 2});
                                }
                                refresh();
                            });
                    }
                }
            )
        }, function () {
        });
    }
    //上一页按钮
    $("#preBtn").click(function () {
        var current = [[${categoryVO.current}]];
        var total = [[${categoryVO.total}]];
        if (current == 1) {
            layer.msg('没有上一页了！');
        } else if (current > 1) {
            layer.load(1, {time: 0.15 * 1000});
            $.ajax({
                url: "/backstage/queryCategoryList/" + (Number(current) - Number(1)),
                success: function (html) {
                    setTimeout(function () {
                        $("#table_content").html(html);
                    }, 220)
                }
            });
        } else if (current > total) {
            alert("页码错误！");
        }
    });
    //下一页按钮
    $("#nextBtn").click(function () {
        var current = [[${categoryVO.current}]];
        var total = [[${categoryVO.total}]];
        if (current < total && current > 0) {
            layer.load(1, {time: 0.15 * 1000});
            $.ajax({
                url: "/backstage/queryCategoryList/" + (Number(current) + Number(1)),
                success: function (html) {
                    setTimeout(function () {
                        $("#table_content").html(html);
                    }, 220)
                }
            });
        } else if (current == total) {
            layer.msg('没有下一页了！');
        } else {
            layer.msg('没有下一页了！');
        }
    });
    //跳转按钮
    $("#pageJumpBtn").click(function () {
        //获取当前页码
        var current = [[${categoryVO.current}]];
        //获取总页码
        var total = [[${categoryVO.total}]];
        //获取input中的输入值
        var jumpPage = $("#pageJumpInput").val();
        if (jumpPage >= 1 && jumpPage <= total && jumpPage != current) {
            $.ajax({
                url: "/backstage/queryCategoryList/" + (jumpPage),
                success: function (html) {
                    $("#table_content").html(html);
                    setTimeout(function () {
                        layer.msg('已为您跳转至第 ' + jumpPage + ' 页！');
                    }, 200)
                }
            });
        } else if (jumpPage == current) {
            layer.msg('当前为第 ' + current + ' 页，无须跳转！');
        } else {
            // alert("页码输入错误，请重新输入！");
            layer.msg('页码输入有误，请重新输入！', {icon: 2});
        }
    });
</script>
</body>
</html>